<template>
  <div>
    <popup v-model="showPopup" @on-hide="clickCancel" :popup-style="{'background':'#fff', 'border-radius': '10px 10px 0px 0px'}" style="max-height: 15rem">
      <group>
        <div class="c-flex-row c-justify-sb c-fs26 c-fc-xblack c-hh80 c-aligni-center c-bd-b1-f6">
          <div @click="clickCancel" class="c-h c-flex-row c-aligni-center c-ph24">取消</div>
          <div class="c-flex-row c-aligni-end c-h c-pb5">
            <my-small-tabbar tabNameClass="c-fs24 c-fc-xblack c-ph24" :tabList="tabList" :tabIndex="selectOptionIndex" @changeTab="clickSelectOptionType"></my-small-tabbar>
          </div>
          <div @click="clickConfirm" class="c-h c-flex-row c-aligni-center c-ph24">确定</div>
        </div>
      </group>
      <div v-if="selectOptionIndex == 0">
        <div v-for="(item, index) in selectDataOptions" :key="index"
          @click="changeRecentType(item, index)"
          class="c-textAlign-c c-pv20 c-bd-b1-f6 c-fs26"
          :class="selctRecentItem.value == item.value ? 'theme-fc' : ' c-fc-sblack'">{{item.label}}</div>
      </div>
      <div v-else-if="selectOptionIndex == 1">
        <datetime-view v-model="selectMonth" format='YYYY-MM' :endDate="endDate" v-if="comeFrom == 1"></datetime-view>
        <datetime-view v-model="selectMonth" format='YYYY-MM' v-else></datetime-view>
      </div>
      <div v-else>
        <picker :data="quarterList" v-model="selectQuarter" @on-change='change'></picker>
      </div>
    </popup>
  </div>
</template>
<script>
import { utilJs } from "@/utils/common";
import { Popup, DatetimeView, Picker } from 'ckjrweb-mp-ui/src/components/index';
import mySmallTabbar from '@/components/templates/common/MySmallTabbar.vue';
let years = []
for (var i = new Date().getFullYear(); i >= 2000; i--) {
  years.push({
    name: i,
    value: i + ''
  })
}
let quarter = [ // 季度的值
  {name: '一季度', value: '01'},
  {name: '二季度', value: '04'},
  { name: '三季度', value: '07' },
  { name: '四季度', value: '10' }
]
export default {
  name: 'selectTimePopup',
  components: {
    Popup,
    mySmallTabbar,
    DatetimeView,
    Picker
  },
  props: {
    showPopup: { // 是否显示弹框
      type: Boolean,
      default: false
    },
    comeFrom: { // 0胜者定制 1徐鸿定制
      type: Number,
      default: 0
    },
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      tabList: [
        {title: '近期', index: 0},
        {title: '月份', index: 1},
        // {title: '季度', index: 2}
      ],
      quarterList: [years, quarter], // 筛选季度
      selectDataOptions: [
        {label: '昨日', value: -1},
        // {label: '今日', value: 1},
        {label: '本周', value: 2},
        {label: '本月', value: 3},
        {label: '本季度', value: 4}
      ],
      selectOptionIndex: 0, // 选择的筛选类型 （近期 月份 季度）
      selctRecentItem: {}, // 选中的近期筛选项 （今日 本周 本月 本季度）
      selectMonth: '', // 选择的月份
      selectQuarter: [new Date().getFullYear() + '', '01'], // 选择的季度
      endDate: utilJs.dateFormat(Date.now(), '-', 1)
    }
  },
  activated() {
    this.changeRecentType(this.selectDataOptions[3], 3)
    this.$nextTick(res => {
      if (this.comeFrom == 0) {
        this.tabList.push({title: '季度', index: 2});
      }
    })
  },
  methods: {
    clickConfirm() { // 点击确定
      let selectData = {}
      selectData.type = this.selectOptionIndex;
      switch (this.selectOptionIndex) {
        case 0: // 近期
          selectData.value = this.selctRecentItem.value;
          selectData.label = this.selctRecentItem.label;
          break;
        case 1: // 月份
          selectData.value = this.selectMonth;
          break;
        case 2: // 季度
          selectData.label = this.selectQuarter[0] + quarter.find(i => i.value == this.selectQuarter[1]).name;
          selectData.value = this.selectQuarter[0] + '-' + this.selectQuarter[1]; // 季度传值比较特殊 2020-01 2020-04 2020-07 2020-10
          break;
        default:
          selectData.value = this.selctRecentItem;
          break;
      }
      this.$emit('clickConfirm', selectData);
    },
    clickCancel() { // 点击取消
      this.$emit('clickCancel', false)
    },
    clickSelectOptionType(index) { // 切换筛选类型（近期 月份 季度）
      this.selectOptionIndex = index;
      if (index == 1) { // 选择的月份，给个默认值
        this.selectMonth = this.setCurrentMonth()
      }
    },
    setCurrentMonth() {
      let now = new Date()
      let cmonth = this.comeFrom == 1 ? now.getMonth() : now.getMonth() + 1
      // let day = now.getDate()
      if (cmonth < 10) cmonth = '0' + cmonth
      // if (day < 10) day = '0' + day
      return now.getFullYear() + '-' + cmonth
    },
    changeRecentType(item, index) { // 切换近期筛选的，选择完之后弹框消失，去获取数据
      this.selctRecentItem = item;
    }
  }
}
</script>
<style scoped>

</style>